<template>
  <page-header-wrapper>
    <a-card>
      <div class="flex mb-10">
        <a-input placeholder="请输入项目地址、客户名称、贷款顾问" style="width:30%" v-model="keyWord" />
        <a-button class="mx-8" type="primary" @click="search">查询</a-button>
      </div>
      <a-table rowKey="index" :columns="columns" :data-source="data" :pagination="pagination" :scroll="{ y: 400 }">
        <span slot="drawDowns" slot-scope="drawDowns"> {{ moneyType(drawDowns) }}</span>
        <span slot="interests" slot-scope="interests"> {{ minMoney(interests) }}</span>
        <span slot="totalArrears" slot-scope="totalArrears"> {{ minMoney(totalArrears) }}</span>
        <span slot="limitFees" slot-scope="limitFees"> {{ minMoney(limitFees) }}</span>
        <span slot="detail" slot-scope="_, record">
          <exeDetail :record="record" />
        </span>
        <span slot="reason" slot-scope="_, record">
          <setReason :record="record" @update="getData" />
        </span>
        <span slot="program" slot-scope="_, record">
          <a @click="toDetail(record)">设置</a>
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { getExecute } from '@/api/common'
export default {
  name: 'index',
  data() {
    return {
      keyWord: '',
      columns: [
        {
          title: '项目编号',
          dataIndex: 'projectNum',
          key: 'projectNum',
          width: 130
        },
        {
          title: '项目地址',
          dataIndex: 'addr',
          key: 'addr',
          width: 110
        },
        {
          title: '客户名称',
          dataIndex: 'clientName',
          key: 'clientName'
        },
        {
          title: '贷款顾问',
          dataIndex: 'sysUserName',
          key: 'sysUserName'
        },
        {
          title: '放款总额',
          dataIndex: 'drawDowns',
          key: 'drawDowns',
          scopedSlots: { customRender: 'drawDowns' }
        },
        {
          title: '利息',
          dataIndex: 'interests',
          key: 'interests',
          scopedSlots: { customRender: 'interests' }
        },
        {
          title: '贷款限额费',
          dataIndex: 'limitFees',
          key: 'limitFees',
          scopedSlots: { customRender: 'limitFees' }
        },
        {
          title: '总欠金额',
          dataIndex: 'totalArrears',
          key: 'totalArrears',
          scopedSlots: { customRender: 'totalArrears' }
        },
        {
          title: '违约明细',
          dataIndex: 'detail',
          key: 'detail',
          scopedSlots: { customRender: 'detail' }
        },
        {
          title: '原因',
          dataIndex: 'reason',
          key: 'reason',
          scopedSlots: { customRender: 'reason' }
        },
        {
          title: '违约程序',
          dataIndex: 'program',
          key: 'program',
          scopedSlots: { customRender: 'program' }
        }
      ],
      data: [],
      pagination: {
        total: 1,
        pageSize: 10,
        onChange: this.getData
      }
    }
  },
  components: {
    exeDetail: () => import('./executeDetail.vue'),
    setReason: () => import('./setReason.vue')
  },
  mounted() {
    this.getData()
  },
  methods: {
    search() {
      this.getData()
    },
    toDetail(record) {
      // console.log(record.projectId, record.defaultDetailId)
      this.$router.push({
        name: 'execute/program',
        query: { projectId: record.projectId, defaultDetailId: record.defaultDetailId }
      })
    },
    moneyType(v) {
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    minMoney(v) {
      if (v) {
        v = Number(v).toFixed(2)
        return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      } else {
        return ''
      }
    },
    async getData(page = 1) {
      var _form = {
        page,
        limit: this.pagination.pageSize
      }
      if (this.keyWord) {
        _form.keyWord = this.keyWord
      }
      const res = await getExecute(_form)
      const data = res.result.data
      this.pagination.total = data.total
      const list = data.list.map((el, i) => {
        el.index = i
        return el
      })
      this.data = list
    }
  }
}
</script>
<style lang="scss" scoped></style>
